<template>
  <!-- 计划成本-税费抵扣 -->
  <div class="otherCosts blue-border">
    <div class="top">
      <div class="title">各月份支付差异情况</div>
      <mixChart ref="monthPaymentDifferenceChart" height="70%" id="monthPaymentDifferenceChart"></mixChart>
      <tableBox :data="MonthPaymentDifferenceData" :show-serial-number="false">
      </tableBox>
    </div>
    <div class="bottom">
      <div>
        <div class="title">{{ month }}月支付明细</div>
        <tableBox :data="paymentDetailsData" :show-serial-number="false" :showThead="true"
          :thead-list="paymentDetailsThead">
        </tableBox>
      </div>
      <div>
        <div class="title">当月区域支付情况表</div>
        <div class="title float">实际支付总额:<span>￥99999</span></div>
        <tableBox :data="regionalPaymentData" :show-serial-number="false" :showThead="true"
          :thead-list="regionalPaymentThead">
        </tableBox>
      </div>
    </div>
  </div>
</template>
<script>
import mixChart from './mixChart'
import tableBox from "./table-box.vue";

export default {
  components: { mixChart, tableBox },
  data() {
    return {
      month: "",
      paymentDetailsData: [
        [{ val: '招待费用' }, { val: '99999.99' }, { val: '99999.99' }, { val: '99999.99' }, { val: '99999.99' }, { val: '99999.99' }],
        [{ val: '员工福利' }, { val: '99999.99' }, { val: '99999.99' }, { val: '99999.99' }, { val: '99999.99' }, { val: '99999.99' }],
        [{ val: '保险费用' }, { val: '99999.99' }, { val: '99999.99' }, { val: '99999.99' }, { val: '99999.99' }, { val: '99999.99' }],
        [{ val: '差旅费' }, { val: '99999.99' }, { val: '99999.99' }, { val: '99999.99' }, { val: '99999.99' }, { val: '99999.99' }],
        [{ val: '工服费' }, { val: '99999.99' }, { val: '99999.99' }, { val: '99999.99' }, { val: '99999.99' }, { val: '99999.99' }],
        [{ val: '其他费' }, { val: '99999.99' }, { val: '99999.99' }, { val: '99999.99' }, { val: '99999.99' }, { val: '99999.99' }],
      ],
      paymentDetailsThead: ['支付科目', '基线支出', '计划支出', '实际支出', '基线差异', '计划差异'],
      regionalPaymentThead: ['区域', '计划支付', '实际支付', '差额'],
      regionalPaymentData: [
        [{ val: '第一城片区' }, { val: '99999.99' }, { val: '99999.99' }, { val: '99999.99' }],
        [{ val: '庐山片区' }, { val: '99999.99' }, { val: '99999.99' }, { val: '99999.99' }],
        [{ val: '河东片区' }, { val: '99999.99' }, { val: '99999.99' }, { val: '99999.99' }],
        [{ val: '长沙片区' }, { val: '99999.99' }, { val: '99999.99' }, { val: '99999.99' }],
      ],
      MonthPaymentDifferenceData: [
        [{ val: '支付金额' }, { val: 60000 }, { val: 50000 }, { val: 80000 }, { val: 90000 }, { val: 50000 }, { val: 50000 }, { val: 50000 }, { val: 50000 }, { val: 50000 }, { val: 50000 }, { val: 50000 }, { val: 50000 },],
        [{ val: '基线' }, { val: 80000 }, { val: 80000 }, { val: 80000 }, { val: 80000 }, { val: 80000 }, { val: 80000 }, { val: 80000 }, { val: 80000 }, { val: 50000 }, { val: 50000 }, { val: 50000 }, { val: 50000 },],
        [{ val: '计划' }, { val: 50000 }, { val: 50000 }, { val: 50000 }, { val: 50000 }, { val: 50000 }, { val: 50000 }, { val: 50000 }, { val: 50000 }, { val: 50000 }, { val: 50000 }, { val: 50000 }, { val: 50000 },],
      ]
    }

  },
  created() {
    let nTime = new Date();
    this.month = nTime.getMonth() + 1;
  },
  mounted() {

    this.getMonthPaymentDifference()
  },
  methods: {
    getMonthPaymentDifference() {
      let xAxis = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      let dataAV = [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200]
      let dataRV = [600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600]
      let dataPV = [800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800]
      let chartData = { xAxis, dataAV, dataRV, dataPV }
      this.$refs.monthPaymentDifferenceChart.initChart(chartData)
    }
  }
}
</script>
<style lang="scss" scoped>
@import 'border.css';

.otherCosts {
  width: 100%;
  height: 100%;
  padding: 25px 21px;
  display: flex;
  flex-direction: column;

  .title {
    font-weight: bold;
    font-size: 20px;
    color: #000000;
    text-align: center;
    margin: 0 0 20px;

  }

  .top {
    height: 48%;
    display: flex;
    flex-direction: column;
    margin-bottom: 2%;

    #monthPaymentDifferenceChart {
      margin-bottom: 16px;
    }

  }

  .bottom {
    flex-grow: 1;
    height: 50%;
    display: flex;
    box-sizing: border-box;
    padding-top: 32px;
    border-top: 1px solid #ddd;

    >div {
      height: 100%;
      display: flex;
      flex-direction: column;

      // .tableBox {
      //   flex-grow: 1;
      // }
    }

    >div:nth-child(1) {
      width: 60%;
      margin-right: 20px;
    }

    >div:nth-child(2) {
      flex-grow: 1;
      position: relative;

      .float {
        position: absolute;
        right: 20px;

        span {
          color: orange;
        }
      }
    }
  }
}
</style>